<template>
  <div>
    <vxe_table
      :options="options"
      @handleTableBtn="handleTableBtn"
      ref="baseTable"
    >
      <template #btn>
        <el-button
          type="success"
          icon="el-icon-user"
          @click="add"
          v-permission="['btn_sysUserAdmin_add']"
          >添加系统用户</el-button
        >
      </template>
    </vxe_table>
    <addDialog ref="add" @success="success"></addDialog>
  </div>
</template>

<script>
import vxe_table from "@/components/table/vxe_table.vue";
import tableMixin from "@/mixins";
import addDialog from "./comps/addDialog.vue";
import { list, set } from "@/api/user";
import { hasBtnAuth, parseTime } from "@/utils";
export default {
  mixins: [tableMixin],
  components: {
    vxe_table,
    addDialog,
  },
  data() {
    return {
      options: {
        id: "usertable",
        apiFn: list,
        fixedParams:{
          platform:1
        },
        columns: [
          {
            field: "nick",
            title: "用户昵称",
            search: true,
            valueType: "input",
          },
          {
            field: "headUrl",
            title: "用户头像",
            type: "html",
            defaultValue: null,
            formatter: ({ row }) =>
              `<img style="width:30px;height:30px" src=${row.headUrl} />`,
          },
          {
            field: "acc",
            title: "用户账号",
            search: true,
            valueType: "input",
          },
          { field: "roleName", title: "用户角色" },
          { field: "orgName", title: "所属组织" },
          {
            field: "state",
            title: "用户状态",
            type: "html",
            formatter: ({ row }) => {
              if (row.state) {
                return "正常";
              } else {
                return "停用";
              }
            },
          },
          {
            field: "createTime",
            title: "时间",
            type: "html",
            formatter: ({ row }) => parseTime(row.createTime),
          },
        ],
        btn: [
          {
            title: "编辑",
            handleName: "edit",
            type: "success",
            show: () => hasBtnAuth("btn_sysUserAdmin_edit"),
          },
          {
            title: "启用",
            handleName: "handleOpen",
            show: (row) => row.state == 0 && hasBtnAuth("btn_sysUserAdmin_set"),
          },
          {
            title: "停用",
            handleName: "handleClose",
            type: "danger",
            show: (row) => row.state == 1 && hasBtnAuth("btn_sysUserAdmin_set"),
          },
        ],
      },
    };
  },

  methods: {
    edit(row, index) {
      console.log(row, index);
    },
    handleADD() {
      this.$refs.addDialog.open();
    },
    handleOpen(row) {
      this.$confirm("确定启用", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await set({
            targetUser: row.userId,
            state: 1,
          });
          if (res.status == 0) {
            this.$message({
              type: "success",
              message: "success",
            });
            this.success();
          }
        })
        .catch(() => {});
    },
    handleClose(row) {
      this.$confirm("确定停用", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await set({
            targetUser: row.userId,
            state: 0,
          });
          if (res.status == 0) {
            this.$message({
              type: "success",
              message: "success",
            });
            this.success();
          }
        })
        .catch(() => {});
    },
  },
};
</script>
